<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-07-13 13:42:20
 * @LastEditTime: 2022-07-28 15:48:33
-->
<template>
  <dt-modal-info ref="info" title="调整附件">
    <div class="flex flex-horizontal-end ">
      <Button type="primary" @click="downZipFun" v-if="downLoadFlag">下载全部附件</Button>
    </div>
    <div v-if="showData.imageAttachList.length" class="image-content">
      <p class="title">该调整单共有{{showData.imageAttachList.length}}个图片附件</p>
      <div class="flex image-style">
        <div v-for="(item,index) in showData.imageAttachList" :key="index"
          class="small-img hand position-relative" :style="{'width':'100px','height':'100px'}">
          <img :src="item.accessoryUrl" class="img-show"
            :style="{'width':'100px','height':'100px'}">
          <div class="list-cover flex flex-vertical-center">
            <Icon type="ios-eye-outline" :size="22" @click.native="preViewImgFun(index)">
            </Icon>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showData.fileAttachList.length" class="image-content">
      <p class="title">该调整单共有{{showData.fileAttachList.length}}个文件附件</p>
      <div style="max-height:300px;overflow-y:scroll;">
        <div v-for="(item,index) in showData.fileAttachList" :key="index">
          <p class="process" @click="downloadFile(item)">{{item.accessoryName}}</p>
        </div>
      </div>
    </div>
    <preview-image :images="preViewImg" :showDownLoad="downLoadFlag" :showIndex="showIndex"
      ref="preViewImage">
    </preview-image>
  </dt-modal-info>
</template>
<script>
  import enclosureImg from '@/components/enclosureImg.vue'
  import toolMgr from '@/biz/base/tool.js'
  import adjustMgr from '@/biz/sales/adjustOrder'
  import dt from '@dt/dt'
  export default {
    data() {
      return {
        showData: {
          imageAttachList: [],
          fileAttachList: []
        },
        preViewImg: [],
        showIndex: 0,
        checkRow: {},
        downLoadFlag: false
      }
    },
    components: {
      enclosureImg
    },
    methods: {
      show(row) {
        this.checkRow = { ...row }
        let type = row.adjustNo.slice(0, 2)
        if (row.fromPage == 'approve') {
          if (type == 'TR') {
            this.downLoadFlag = this.unlocking('0206090102')
          } else {
            this.downLoadFlag = this.unlocking('0206090202')
          }
        } else {
          if (type == 'TR') {
            this.downLoadFlag = this.unlocking('0104010406')
          } else {
            this.downLoadFlag = this.unlocking('0104030406')
          }
        }

        this.showData = {
          imageAttachList: row.imageAttachList,
          fileAttachList: row.fileAttachList
        }
        this.$refs.info.show()
      },
      preViewImgFun(index) {
        this.preViewImg = this.showData.imageAttachList.map(item => {
          return item
            .accessoryUrl
        })
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      downZipFun() {
        let params = {
          orderCode: this.checkRow.adjustNo,
          housesId: dt.buildInfo().housesId || this.checkRow.housesId,
        }
        adjustMgr.loadDownAttachFun(params).then(res => {}).catch(err => {})
      },
      downloadFile(item) {
        if (!this.downLoadFlag) {
          this.$Message.info('无下载权限！')
          return false
        }
        toolMgr.downloadFile(item.accessoryUrl, item.accessoryName)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .image-content {
    .title {
      margin-top: 10px;
      line-height: 30px;
    }

    .process {
      color: #2d8cf0;
      cursor: pointer;
    }

    .text {
      padding: 10px 0;
      color: #333;
    }

    .image-style {
      overflow-x: auto;
      overflow-y: hidden;
    }

    .list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: space-around;
    }

    .small-img {
      margin-right: 10px;
    }

    .small-img:hover .list-cover {
      display: flex;
    }

    .list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    .desc-content {
      margin-left: 50px;
    }
  }
</style>